import styles from './index.module.scss'
import Button from '@c/button'
import { useRecoilValue } from 'recoil'
import { userInfo } from '@/store'
import { useUserTab, useShowLogOut, useShowLogin, useOffsetScrolling } from '@/utils/hooks'
import cm from 'classnames'
import { useMemo } from 'react'
import dayjs from 'dayjs'
import { useRouter } from 'next/router'

const formatEmail = email => {
  let mailParts = (email + '').split('@')

  mailParts[0] = mailParts[0].substring(0, 2) + '****' + mailParts[0].substring(mailParts[0].length - 2)

  return mailParts.join('@')
}

const Index = props => {
  const { onClose } = props
  const setShowLogOut = useShowLogOut()
  const setShowLoginIn = useShowLogin()
  const user = useRecoilValue(userInfo)
  const tabArr = useUserTab()
  const router = useRouter()
  useOffsetScrolling()
  const navArr = [
    {
      key: 'active-code',
      url: '/active-code',
      icon: '/images/enable.webp',
      iconActive: '/images/enable-active.webp',
      event: () => {
        router.push('/active-code')
      },
      label: '激活码兑换'
    },
    ...tabArr,
    {
      url: '/points',
      icon: '/images/p4.png',
      iconActive: '/images/vip-active.png',
      event: () => {
        router.push('/points')
      },
      label: '积分兑会员',
      cornerMark: '可兑换'
    },
    {
      icon: '/images/p5.png',
      iconActive: '/images/download_active.png',
      isLink: true,
      url: '/download',
      label: '下载应用',
      space: true,
      target: '_self'
    },
    {
      icon: '/images/p6.png',
      isLink: true,
      url: 'https://t.me/+OPQzYYKfMK04ODU1',
      label: '加入社群',
      target: '_blank',
      rel: 'nofollow'
    }
  ]
  const quanyiMemo = useMemo(() => {
    //未登录
    if(!user.token){
      return {
        img: <div className={cm(styles.vipImg, styles.notLogin)} onClick={() => setShowLoginIn()}></div>,
        time: (
          <p className={cm(styles.pDate, 'textEllipsis')} onClick={() => setShowLoginIn()}>
            登录同步多端记录
          </p>
        ),
        email: (
          <p className={cm(styles.email, styles.emailLogin)} onClick={() => setShowLoginIn()}>
            登录
          </p>
        ),
        toVip: (
          <Button onClick={() => setShowLoginIn(true)} className={cm(styles.openVip, styles.notLogin)}>
            <img src="/images/vip-icon1.png" className="w-3 h-3" alt="" />
            <span>注册领免费会员</span>
          </Button>
        )
      }
    }

    const expire = dayjs(user.expireTime * 1000)
    const lastTime = expire.diff(dayjs(new Date()), 'day')
    //还是会员
    if (lastTime > 0) {
      return {
        img: <div className={styles.vipImg}></div>,
        email: <p className={cm(styles.email, 'textEllipsis', styles.isVip)}>{formatEmail(user?.email)}</p>,
        time: <p className={cm(styles.pDate, 'textEllipsis')}>VIP权益至{expire.format('YYYY年M月D日')}</p>,
        toVip: (
          <Button link href="/vip" className={styles.openVip}>
            <img src="/images/vip-juji.png" className="w-3 h-3" alt="" />
            <span>续费会员</span>
          </Button>
        )
      }
    } else {
      // 从未开通会员
      if (!user.expireTime) {
        return {
          img: <div className={styles.vipImg}></div>,
          time: null,
          email: <p className={cm(styles.email, 'textEllipsis', styles.notVip)}>{formatEmail(user?.email)}</p>,
          toVip: (
            <Button link href="/vip" className={styles.openVip}>
              <img src="/images/vip-juji.png" className="w-3 h-3" alt="" />
              <span>开通会员</span>
            </Button>
          )
        }
      }
      // 会员已经过期
      return {
        img: <div className={styles.vipImg}></div>,
        time: (
          <p className={cm(styles.pDate, 'textEllipsis')}>
            您的会员已过期{Math.abs(lastTime) <= 0 ? '' : Math.abs(lastTime) + '天'}
          </p>
        ),
        email: <p className={cm(styles.email, 'textEllipsis', styles.notVip)}>{formatEmail(user?.email)}</p>,
        toVip: (
          <Button link href="/vip" className={styles.openVip}>
            <img src="/images/vip-juji.png" className="w-3 h-3" alt="" />
            <span>开通会员</span>
          </Button>
        )
      }
    }
  }, [user])

  return (
    <div className={styles.mask} onClick={onClose}>
      <div className={styles.menu}>
        <div className={styles.top}>
          <div className={styles.userInfo}>
            {quanyiMemo.img}
            <div className={styles.vipDate}>
              {quanyiMemo.email}
              {quanyiMemo.time}
            </div>
          </div>
          {quanyiMemo.toVip}
        </div>
        <div className={styles.middle}>
          {navArr.map((item, index) => {
            if (item.isLink) {
              return (
                <Button
                  key={index}
                  target={item.target}
                  link
                  href={item.url}
                  rel={item.rel}
                  className={cm(styles.navItem, item.space ? 'mt-5' : '')}
                >
                  <img alt={item.label} src={item.icon} className={styles.icon} />
                  <span className={styles.label}>{item.label}</span>
                </Button>
              )
            }
            return (
              <div
                key={index}
                className={cm({
                  [styles.navItem]: true,
                  'mt-5': item.space,
                  [styles.navItemActive]: router.pathname === item.url
                })}
                onClick={item.event}
              >
                <img
                  alt={item.label}
                  src={router.pathname === item.url ? item.iconActive : item.icon}
                  className={styles.icon}
                />
                <span className={styles.label}>{item.label}</span>
                {item.cornerMark && <span className={styles.cornerMark}>{item.cornerMark}</span>}
              </div>
            )
          })}
        </div>
        {user.token && (
          <div className={styles.bottom} onClick={() => setShowLogOut()}>
            退出登录
          </div>
        )}
      </div>
    </div>
  )
}

export default Index
